<!DOCTYPE html>
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | 仪表盘</title>
  <!-- 告诉浏览器该页面是自适应布局 -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <!--<script src="../../static/js/require.js" th:src="@{/js/require.js}" data-main=""></script>-->
  <!--<script src="../../static/js/main.js" th:src="@{/js/main.js}"></script>-->

  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.min.css"
        th:href="@{/plugins/bootstrap/css/bootstrap.min.css}"/>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../static/plugins/font-awesome/css/font-awesome.min.css"
        th:href="@{/plugins/font-awesome/css/font-awesome.min.css}"/>
  <!-- Ionicons -->
  <link rel="stylesheet" href="../../static/plugins/Ionicons/css/ionicons.min.css"
        th:href="@{/plugins/Ionicons/css/ionicons.min.css}"/>
  <!-- Theme style -->
  <link rel="stylesheet" href="../../static/frame/css/AdminLTE.min.css"
        th:href="@{/frame/css/AdminLTE.min.css}"/>
  <!-- DataTables -->
  <link rel="stylesheet" href="../../static/plugins/datatables.net/media/css/dataTables.bootstrap.min.css"
        th:href="@{/plugins/datatables.net/media/css/dataTables.bootstrap.min.css}">

  <!--FixedColumns-->
  <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/FixedColumns/css/fixedColumns.dataTables.min.css"
        th:href="@{/plugins/datatables.net/extensions/FixedColumns/css/fixedColumns.dataTables.min.css}">
  <!--FixedHeader-->
  <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/FixedHeader/css/fixedHeader.dataTables.css"
        th:href="@{/plugins/datatables.net/extensions/FixedHeader/css/fixedHeader.dataTables.css}">
  <!--ColReorder-->
  <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/ColReorder/css/colReorder.dataTables.css"
        th:href="@{/plugins/datatables.net/extensions/ColReorder/css/colReorder.dataTables.css}">

  <!--https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css-->
  <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/Select/css/select.dataTables.min.css"
        th:href="@{/plugins/datatables.net/extensions/Select/css/select.dataTables.min.css}">
  <!--https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css-->
  <link rel="stylesheet" href="../../static/plugins/datatables.net/extensions/Buttons/css/buttons.dataTables.css"
        th:href="@{/plugins/datatables.net/extensions/Buttons/css/buttons.dataTables.css}">

  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="../../static/plugins/iCheck/all.css" th:href="@{/plugins/iCheck/all.css}">
  <!--消息弹框动画样式--->
  <link rel="stylesheet" href="../../static/plugins/bootstrap-notify/animate.css" th:href="@{/plugins/bootstrap-notify/animate.css}">

  <!-- bootstrap wysihtml5 - text editor 富文本编辑框 -->
  <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"
        th:href="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}">

  <!-- AdminLTE 皮肤。
       从 css/skins 目录下选择一个皮肤，以减少负载，而不是下载所有皮肤。 -->
  <link rel="stylesheet" href="../../static/frame/css/skins/_all-skins.min.css" th:href="@{/frame/css/skins/_all-skins.min.css}"/>
  <!-- Google Font -->
  <link rel="stylesheet" href="../../static/frame/css/font-family.css"
        th:href="@{/frame/css/font-family.css}">

  <link rel="stylesheet" href="../../static/frame/adminlte-wolf.css"
        th:href="@{/frame/adminlte-wolf.css}">

  <style>

    th, td { white-space: nowrap; }
  </style>

</head>
<body class="hold-transition skin-blue sidebar-mini fixed wolf">
<div class="wrapper">

  <header class="main-header" id="main-header">

    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top top">
      <!-- Logo -->
      <a href="demo.html" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>A</b>LT</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>Admin</b>LTE</span>
      </a>

      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">切换导航</span>
      </a>

      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <!-- <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" id="navbar-search-input" placeholder="搜索">
          </div>
        </form> -->
        <ul class="nav navbar-nav">
          <!-- User Account: style can be found in dropdown.less -->
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="../../adminlte/adminlte/img/user2-160x160.jpg" class="user-image" alt="用户图像">
              <span class="hidden-xs">Alexander Pierce</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="../../adminlte/adminlte/img/user2-160x160.jpg" class="img-circle" alt="用户图像">

                <p>
                  Alexander Pierce - Web 开发人员
                  <small>注册于2012年11月</small>
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body">
                <div class="row">
                  <div class="col-xs-4 text-center">
                    <a href="#">关注</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">销售</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">好友</a>
                  </div>
                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">资料</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">退出</a>
                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->
          <li>
            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
          </li>
        </ul>
      </div>
    </nav>

    <nav class="navbar navbar-static-top">
      <div class="collapse navbar-collapse pull-left top-menu" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">链接 <span class="sr-only">（当前）</span></a></li>
          <li><a href="#">链接</a></li>
          <li><a href="#">链接</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">操作</a></li>
              <li><a href="#">另一个操作</a></li>
              <li><a href="#">其他操作</a></li>
              <li class="divider"></li>
              <li><a href="#">分隔链接</a></li>
              <li class="divider"></li>
              <li><a href="#">分隔后的链接</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">分区</li>

        <li class="treeview active menu-open">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>数据集</span>
            <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#"><i class="fa fa-circle-o"></i></a></li>
            <li class="treeview">
              <a href="#"><i class="fa fa-circle-o"></i> 层级1
                <span class="pull-right-container">
                                  <i class="fa fa-angle-left pull-right"></i>
                                </span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-circle-o"></i> 层级2</a></li>
                <li class="treeview">
                  <a href="#"><i class="fa fa-circle-o"></i> 层级2
                    <span class="pull-right-container">
                                          <i class="fa fa-angle-left pull-right"></i>
                                        </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
          </ul>
        </li>

        <li class="treeview">
          <a href="#">
            <i class="fa fa-files-o"></i> <span>多级菜单</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
            <li class="treeview">
              <a href="#"><i class="fa fa-circle-o"></i> 层级1
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-circle-o"></i> 层级2</a></li>
                <li class="treeview">
                  <a href="#"><i class="fa fa-circle-o"></i> 层级2
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-share"></i> <span>多级菜单</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
            <li class="treeview">
              <a href="#"><i class="fa fa-circle-o"></i> 层级1
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-circle-o"></i> 层级2</a></li>
                <li class="treeview">
                  <a href="#"><i class="fa fa-circle-o"></i> 层级2
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> 层级3</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#"><i class="fa fa-circle-o"></i> 层级1</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-book"></i> <span>单独菜单</span></a></li>
        <li class="header">分区</li>
        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>重要</span></a></li>
        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>警告</span></a></li>
        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>信息</span></a></li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (页眉) -->
    <section class="content-header">
      <h1>主标题
        <small>小标题</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li>一级菜单</li>
        <li>二级菜单</li>
        <li class="active">当前菜单</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <!-- Info boxes -->
      <div class="row">

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">CPU 使用</span>
              <span class="info-box-number">90<small>%</small></span>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">喜欢</span>
              <span class="info-box-number">41,410</span>
            </div>
          </div>
        </div>
        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">销售</span>
              <span class="info-box-number">760</span>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">新会员</span>
              <span class="info-box-number">2,000</span>
            </div>
          </div>
        </div>

      </div>

      <div class="row">
        <div class="box box-info form-horizontal">
          <div class="box-body">

            <div class="form-group col-sm-6">
              <label>
                <input type="radio" name="r3" class="flat-red" checked>
              </label>
              <label>
                <input type="radio" name="r3" class="flat-red">
              </label>
              <label>
                <input type="radio" name="r3" class="flat-red" disabled>
                绿色皮肤单选框
              </label>
            </div>

            <div class="form-group col-sm-6">
              <label for="autoSearch" class="col-sm-4 control-label">自动完成控件:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control"  name="autoSearch" id="autoSearch" placeholder="自动完成控件"
                       autocomplete="off" data-provide="typeahead"/>
              </div>
            </div>

            <div class="form-group col-sm-6">
              <label for="selectCatalog" class="col-sm-4 control-label">树形菜单:</label>

              <div class="col-sm-8">
                <input type="text" class="form-control"  name="selectCatalog" id="selectCatalog"
                       placeholder="树形控件" data-val_required="required"/>
                <div id="tree" style="z-index: 100;position: absolute"></div>
              </div>
            </div>

            <div class="form-group col-sm-6">
              <label for="notify" class="col-sm-4 control-label">名称：</label>

              <div class="col-sm-8">

                <button type="button" class="btn btn-default" id="notify">
                  默认样式弹框 <!--bs-example-modal-lg  modal-lg  设置模态框变大 -->
                </button>
              </div>
            </div>

            <div class="form-group col-sm-6">
              <label for="testClick" class="col-sm-4 control-label">测试点击事件：</label>
              <div class="col-sm-8">

                <button type="button" class="btn btn-default" id="testClick">
                  测试点击事件
                </button>
              </div>
            </div>

          </div>
        </div>
        <!--<div class="box">-->
        <!--<div class="form-group">-->
        <!--<label class="col-lg-2 col-md-2 control-label">上级目录</label>-->
        <!--<input id="selectCatalog"  name="selectCatalog" type="text" autocomplete="off" class="col-lg-10 col-md-2 form-group"-->
        <!--onclick="$('#tree').show()" style="width: 250px;height: 31px;margin-left: 10px; margin-bottom:0px" tabindex="2">-->
        <!--<div id="tree" style="display: none; position:absolute; z-index:1010; background-color:white; margin-left:195px; width: 250px"></div>-->
        <!--</div>-->
        <!--</div>-->
      </div>


      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">悬停数据表-example2</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="btn-group">
                <button type="button" class="btn btn-info">选择</button>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#" id="demo_select_all">全选</a></li>
                  <li><a href="#" id="demo_select_none">全不选</a></li>
                </ul>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-info">导出</button>
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
                  <span class="sr-only">切换下拉菜单</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#" id="demo_export_pdf">导出PDF</a></li>
                  <li><a href="#" id="demo_export_csv">导出CSV</a></li>
                  <li><a href="#" id="demo_export_excel">导出EXCEL</a></li>
                  <li class="divider"></li>
                  <li><a href="#" id="demo_export_print">打印</a></li>
                </ul>
              </div>
              <table id="example2" class="table table-bordered table-hover"></table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

          <div class="box">
            <div class="box-header">
              <h3 class="box-title">数据表全功能-example1</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>渲染引擎</th>
                  <th>浏览器</th>
                  <th>平台</th>
                  <th>引擎版本</th>
                  <th>CSS 等级</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 4.0
                  </td>
                  <td>Win 95+</td>
                  <td> 4</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.0
                  </td>
                  <td>Win 95+</td>
                  <td>5</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.5
                  </td>
                  <td>Win 95+</td>
                  <td>5.5</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 6
                  </td>
                  <td>Win 98+</td>
                  <td>6</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet Explorer 7</td>
                  <td>Win XP SP2+</td>
                  <td>7</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>AOL browser (AOL desktop)</td>
                  <td>Win XP</td>
                  <td>6</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Firefox 1.0</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td>1.7</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Firefox 1.5</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Firefox 2.0</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Firefox 3.0</td>
                  <td>Win 2k+ / OSX.3+</td>
                  <td>1.9</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Camino 1.0</td>
                  <td>OSX.2+</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Camino 1.5</td>
                  <td>OSX.3+</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Netscape 7.2</td>
                  <td>Win 95+ / Mac OS 8.6-9.2</td>
                  <td>1.7</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Netscape Browser 8</td>
                  <td>Win 98SE+</td>
                  <td>1.7</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Netscape Navigator 9</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.0</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.1</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1.1</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.2</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1.2</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.3</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1.3</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.4</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1.4</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.5</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1.5</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.6</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>1.6</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.7</td>
                  <td>Win 98+ / OSX.1+</td>
                  <td>1.7</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Mozilla 1.8</td>
                  <td>Win 98+ / OSX.1+</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Seamonkey 1.1</td>
                  <td>Win 98+ / OSX.2+</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Gecko</td>
                  <td>Epiphany 2.20</td>
                  <td>Gnome</td>
                  <td>1.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Webkit</td>
                  <td>Safari 1.2</td>
                  <td>OSX.3</td>
                  <td>125.5</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Webkit</td>
                  <td>Safari 1.3</td>
                  <td>OSX.3</td>
                  <td>312.8</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Webkit</td>
                  <td>Safari 2.0</td>
                  <td>OSX.4+</td>
                  <td>419.3</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Webkit</td>
                  <td>Safari 3.0</td>
                  <td>OSX.4+</td>
                  <td>522.1</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Webkit</td>
                  <td>OmniWeb 5.5</td>
                  <td>OSX.4+</td>
                  <td>420</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Webkit</td>
                  <td>iPod Touch / iPhone</td>
                  <td>iPod</td>
                  <td>420.1</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Webkit</td>
                  <td>S60</td>
                  <td>S60</td>
                  <td>413</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera 7.0</td>
                  <td>Win 95+ / OSX.1+</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera 7.5</td>
                  <td>Win 95+ / OSX.2+</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera 8.0</td>
                  <td>Win 95+ / OSX.2+</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera 8.5</td>
                  <td>Win 95+ / OSX.2+</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera 9.0</td>
                  <td>Win 95+ / OSX.3+</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera 9.2</td>
                  <td>Win 88+ / OSX.3+</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera 9.5</td>
                  <td>Win 88+ / OSX.3+</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Opera for Wii</td>
                  <td>Wii</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Nokia N800</td>
                  <td>N800</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Presto</td>
                  <td>Nintendo DS browser</td>
                  <td>Nintendo DS</td>
                  <td>8.5</td>
                  <td>C/A<sup>1</sup></td>
                </tr>
                <tr>
                  <td>KHTML</td>
                  <td>Konqureror 3.1</td>
                  <td>KDE 3.1</td>
                  <td>3.1</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>KHTML</td>
                  <td>Konqureror 3.3</td>
                  <td>KDE 3.3</td>
                  <td>3.3</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>KHTML</td>
                  <td>Konqureror 3.5</td>
                  <td>KDE 3.5</td>
                  <td>3.5</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Tasman</td>
                  <td>Internet Explorer 4.5</td>
                  <td>Mac OS 8-9</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Tasman</td>
                  <td>Internet Explorer 5.1</td>
                  <td>Mac OS 7.6-9</td>
                  <td>1</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Tasman</td>
                  <td>Internet Explorer 5.2</td>
                  <td>Mac OS 8-X</td>
                  <td>1</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>NetFront 3.1</td>
                  <td>Embedded devices</td>
                  <td>-</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>NetFront 3.4</td>
                  <td>Embedded devices</td>
                  <td>-</td>
                  <td>A</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>Dillo 0.8</td>
                  <td>Embedded devices</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>Links</td>
                  <td>Text only</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>Lynx</td>
                  <td>Text only</td>
                  <td>-</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>IE Mobile</td>
                  <td>Windows Mobile 6</td>
                  <td>-</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Misc</td>
                  <td>PSP browser</td>
                  <td>PSP</td>
                  <td>-</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Other browsers</td>
                  <td>All others</td>
                  <td>-</td>
                  <td>-</td>
                  <td>U</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                  <th>渲染引擎</th>
                  <th>浏览器</th>
                  <th>平台</th>
                  <th>引擎版本</th>
                  <th>CSS 等级</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
        默认样式弹框 <!--bs-example-modal-lg  modal-lg  设置模态框变大 -->
      </button>
      <!--模态框-->
      <div class="modal fade bs-example-modal-lg" id="modal-default">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="test-rowIndex">默认弹框</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <input type="hidden" value="" id="dt_row_index"/>
                <div class="col-xs-2" id="show_previous_data">上一条</div>
                <div class="col-xs-8">

                  <div class="form-group col-sm-6">
                    <label for="value1" class="col-sm-4 control-label">渲染引擎:</label>

                    <div class="col-sm-8">
                      <input type="text" class="form-control"  name="value1" id="value1" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group col-sm-6">
                    <label for="value2" class="col-sm-4 control-label">浏览器：</label>

                    <div class="col-sm-8">
                      <input type="text" class="form-control"  name="value1" id="value2" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group col-sm-6">
                    <label for="value3" class="col-sm-4 control-label">平台:</label>

                    <div class="col-sm-8">
                      <input type="text" class="form-control"  name="value1" id="value3" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group col-sm-6">
                    <label for="value4" class="col-sm-4 control-label">CSS等级:</label>

                    <div class="col-sm-8">
                      <input type="text" class="form-control"  name="value1" id="value4" readonly="readonly"/>
                    </div>
                  </div>

                </div>
                <div class="col-xs-2" id="show_next_data">下一条</div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary">保存修改</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>

      <!--富文本编辑控件-->
      <div class="row">
        <div class="col-md-12">
          <div class="box box-info">
            <div class="box-header">
              <h3 class="box-title">CK Editor
                <small>先进且充满特色</small>
              </h3>
              <!-- tools box -->
              <div class="pull-right box-tools">
                <button type="button" class="btn btn-info btn-sm" data-widget="collapse" data-toggle="tooltip"
                        title="折叠">
                  <i class="fa fa-minus"></i></button>
                <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
                        title="移除">
                  <i class="fa fa-times"></i></button>
              </div>
              <!-- /. tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body pad">
              <form>
                    <textarea id="editor1" name="editor1" rows="10" cols="80">
                                            这是我的内容，将会被替换为 CKEditor。
                    </textarea>
              </form>
            </div>
          </div>
          <!-- /.box -->

          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Bootstrap WYSIHTML5
                <small>简便快捷</small>
              </h3>
              <!-- tools box -->
              <div class="pull-right box-tools">
                <button type="button" class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip"
                        title="折叠">
                  <i class="fa fa-minus"></i></button>
                <button type="button" class="btn btn-default btn-sm" data-widget="remove" data-toggle="tooltip"
                        title="移除">
                  <i class="fa fa-times"></i></button>
              </div>
              <!-- /. tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body pad">
              <form>
                <textarea class="textarea" placeholder="在这里输入内容"
                          style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
              </form>
            </div>
          </div>
        </div>
        <!-- /.col-->
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.4.0
    </div>
    <strong>Copyright &copy; 2014-2019 <a href="#">GTD</a>.</strong> All rights reserved.
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">近期活动</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's 生日</h4>

                <p>23岁生日，在4月24日</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-user bg-yellow"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Frodo 更新了个人资料</h4>

                <p>新电话 +1(800)555-1234</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Nora 加入邮件列表</h4>

                <p>nora@example.com</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-file-code-o bg-green"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">254 计划任务执行</h4>

                <p>执行时间5秒</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">任务进度</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                自定义模板设计
                <span class="label label-danger pull-right">70%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                更新简历
                <span class="label label-success pull-right">95%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Laravel积分
                <span class="label label-warning pull-right">50%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                后端框架
                <span class="label label-primary pull-right">68%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->

      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">常规设置</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              报告面板使用
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              有关此常规设置选项信息
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              允许邮件重定向
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              其他选项是可用的
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              在帖子中显示作者姓名
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              允许用户在博客帖子中显示自己的名字
            </p>
          </div>
          <!-- /.form-group -->

          <h3 class="control-sidebar-heading">聊天设置</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              显示我在线
              <input type="checkbox" class="pull-right" checked>
            </label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              关闭通知
              <input type="checkbox" class="pull-right">
            </label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              删除聊天记录
              <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
            </label>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  <!-- 添加侧边栏的背景。
       这个 div必须放在 control-sidebar 之后 -->
  <div class="control-sidebar-bg"></div>

</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="../../static/plugins/jquery/jquery-1.10.2.js"
        th:src="@{/plugins/jquery/jquery-1.10.2.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../static/plugins/bootstrap/js/bootstrap.min.js"
        th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- FastClick -->
<script src="../../static/plugins/fastclick/lib/fastclick.js"
        th:src="@{/plugins/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script src="../../static/frame/js/adminlte.js"
        th:src="@{/frame/js/adminlte.js}"></script>
<!-- adminlte for demo purposes -->
<script src="../../static/frame/adminlte-wolf.js"
        th:src="@{/frame/adminlte-wolf.js}"></script>
<script src="../../static/frame/wolf.js"
        th:src="@{/frame/wolf.js}"></script>
<!-- DataTables -->
<script src="../../static/plugins/datatables.net/media/js/jquery.dataTables.js"
        th:src="@{/plugins/datatables.net/media/js/jquery.dataTables.js}"></script>
<!-- DataTables -->
<script src="../../static/plugins/datatables.net/media/js/dataTables.bootstrap.js"
        th:src="@{/plugins/datatables.net/media/js/dataTables.bootstrap.js}"></script>

<!--冻结列-->
<script src="../../static/plugins/datatables.net/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"
        th:src="@{/plugins/datatables.net/extensions/FixedColumns/js/dataTables.fixedColumns.min.js}"></script>
<!--冻结表头-->
<script src="../../static/plugins/datatables.net/extensions/FixedHeader/js/dataTables.fixedHeader.js"
        th:src="@{/plugins/datatables.net/extensions/FixedHeader/js/dataTables.fixedHeader.js}"></script>
<!--拖动设置列宽-->
<script src="../../static/plugins/datatables.net/extensions/colresizable/colResizable-1.6.js"
        th:src="@{/plugins/datatables.net/extensions/colresizable/colResizable-1.6.js}"></script>
<!--交换列-->
<script src="../../static/plugins/datatables.net/extensions/ColReorder/js/dataTables.colReorder.js"
        th:src="@{/plugins/datatables.net/extensions/ColReorder/js/dataTables.colReorder.js}"></script>

<!-- iCheck 1.0.1 -->
<script src="../../static/plugins/iCheck/icheck.min.js" th:src="@{/plugins/iCheck/icheck.min.js}"></script>

<!--select-->
<script src="../../static/plugins/datatables.net/extensions/Select/js/dataTables.select.min.js"
        th:src="@{/plugins/datatables.net/extensions/Select/js/dataTables.select.min.js}"></script>

<!---导出依赖-->
<script type="text/javascript" src="../../static/plugins/JSZip-2.5.0/jszip.js" th:src="@{/plugins/JSZip-2.5.0/jszip.js}"></script>
<script type="text/javascript" src="../../static/plugins/pdfmake-0.1.36/pdfmake.js" th:src="@{/plugins/pdfmake-0.1.36/pdfmake.js}"></script>
<script type="text/javascript" src="../../static/plugins/pdfmake-0.1.36/vfs_fonts.js" th:src="@{/plugins/pdfmake-0.1.36/vfs_fonts.js}"></script>

<!--按钮依赖-->
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/dataTables.buttons.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/dataTables.buttons.js}"></script>
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/buttons.flash.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/buttons.flash.js}"></script>
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/buttons.html5.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/buttons.html5.js}"></script>
<script type="text/javascript" src="../../static/plugins/datatables.net/extensions/Buttons/js/buttons.print.js"
        th:src="@{/plugins/datatables.net/extensions/Buttons/js/buttons.print.js}"></script>

<!--树形控件-->
<script type="text/javascript" src="../../static/plugins/bootstrap-treeview/bootstrap-treeview.min.js"
        th:src="@{/plugins/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<!--自动完成控件-->
<script type="text/javascript" src="../../static/plugins/bootstrap-typeahead/bootstrap3-typeahead.min.js"
        th:src="@{/plugins/bootstrap-typeahead/bootstrap3-typeahead.min.js}"></script>

<!--弹框控件-->
<script type="text/javascript" src="../../static/plugins/bootstrap-notify/bootstrap-notify.min.js"
        th:src="@{/plugins/bootstrap-notify/bootstrap-notify.min.js}"></script>

<!-- CK Editor 富文本编辑框-->
<script src="../../static/plugins/ckeditor/ckeditor.js" th:src="@{/plugins/ckeditor/ckeditor.js}"></script>
<!-- Bootstrap WYSIHTML5 富文本编辑框-->
<script src="../../static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"
        th:src="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}"></script>

<script src="../../static/js/utils2/String.js" th:src="@{/js/utils2/String.js}"></script>


<script>

  $(function () {
    $('#example1').DataTable({
      "language": {
        "lengthMenu": "每页 _MENU_ 条记录",
        "zeroRecords": "没有找到记录",
        "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
        "infoEmpty": "无记录",
        "infoFiltered": "(从 _MAX_ 条记录过滤)",
        "paginate": {//分页的样式文本内容。
          "previous": "上一页",
          "next": "下一页",
          "first": "第一页",
          "last": "最后一页"
        }
      },
      "pageLength": 5,//首次加载的数据条数
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false,//自动宽度
      //导出-打印

      dom: 'Bfrtip',
      buttons: [
        'csv', 'excelHtml5', 'pdf', 'print',
      ],
      select: true
    });

    var dataSet = [
      ['Trident4','Internet Explorer 4','Win 95+','4','1','2','3','4','5','6','7','8','9','1'],
      ['Trident5','Internet Explorer 5','Win 95+','5','C','C','C','X','X','X','X','X','X','2'],
      ['Trident6','Internet Explorer 6','Win 95+','5.5','A','A','A','X','X','X','X','X','X','3'],
      ['Trident7','Internet Explorer 7','Win 98+','6','A','A','A','X','X','X','X','X','X','4'],
      ['Trident8','Internet Explorer 8','Win XP SP2+','7','A','A','A','X','X','X','X','X','X','5'],
      ['Trident9','AOL browser (AOL desktop)','Win XP','6','A','A','A','X','X','X','X','X','X','6'],
      ['Gecko1','Firefox 1.0','Win 98+ / OSX.2+','1.7','A','A','A','X','X','X','X','X','X','7'],
      ['Gecko1.5','Firefox 1.5','Win 98+ / OSX.2+','1.8','A','A','A','X','X','X','X','X','X','8'],
      ['Gecko2','Firefox 2.0','Win 98+ / OSX.2+','1.8','A','A','A','X','X','X','X','X','X','9'],
      ['Gecko3','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A','A','A','X','X','X','X','X','X','10'],
      ['Gecko4','Camino 1.0','OSX.2+','1.8','A','A','A','X','X','X','X','X','X','11'],
      ['Gecko5','Camino 1.5','OSX.3+','1.8','A','A','A','X','X','X','X','X','X','12'],
    ];

    var example2 = $('#example2').DataTable({
      "data": dataSet,
      "columns": [
        {
          "title": "渲染引擎" ,
          "className": "td_cell_center",
          "action":function () {
            this.columns([1, 2]).select();
          }
        },
        { "title": "浏览器" ,"className": "td_cell_center"},
        { "title": "平台" ,"className": "td_cell_center"},
        { "title": "引擎版本", "className": "td_cell_center", /*"visible": false*/},
        { "title": "CSS 等级1", "className": "td_cell_center" },
        { "title": "CSS 等级2", "className": "td_cell_center" },
        { "title": "CSS 等级3", "className": "td_cell_center" },
        { "title": "CSS 等级1", "className": "td_cell_center" },
        { "title": "CSS 等级2", "className": "td_cell_center" },
        { "title": "CSS 等级3", "className": "td_cell_center" },
        { "title": "CSS 等级1", "className": "td_cell_center" },
        { "title": "CSS 等级2", "className": "td_cell_center" },
        { "title": "CSS 等级3", "className": "td_cell_center" },
        {
          "title": "操作",
          "class": "center",
          "render": function(data, type, row) {
            return "<button type='button' class='btn btn-block btn-danger' value='"+data+"'>删除</button>";
          }
        }
      ],
      //语言国际化
      "language": {
        "lengthMenu": "每页 _MENU_ 条记录",
        "zeroRecords": "没有找到记录",
        "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
        "infoEmpty": "无记录",
        "infoFiltered": "(从 _MAX_ 条记录过滤)",
        "paginate": {//分页的样式文本内容。
          "previous": "上一页",
          "next": "下一页",
          "first": "第一页",
          "last": "最后一页"
        }
      },
      //自定义控件摆放的位置
      "dom": "<'row'<'col-sm-12'fB>>" +
              "<'row'<'col-sm-12'tr>>" +
              "<'row'<'col-sm-3'l><'col-sm-3'i><'col-sm-6'p>>",
      //导出功能按钮位置样式改变
      "buttons": [
        {
          "extend": "pdf",
          "text": "导出PDF",
          "className": "btn_export_pdf", //按钮的class样式
          "exportOptions": {
            "modifier": {
              "page": "current"
            }
          }
        },
        {
          "extend": "csv",
          "text": "导出csv",
          "className": "btn_export_csv", //按钮的class样式
          "exportOptions": {
            "modifier": {
              "page": "current"
            }
          }
        },
        {
          "extend": "excelHtml5",
          "text": "导出excel",
          "className": "btn_export_excel", //按钮的class样式
          "exportOptions": {
            "modifier": {
              "page": 'current'
            }
          }
        },
        {
          "extend": "print",
          "text": '打印',
          "className": "btn_export_print", //按钮的class样式
          "exportOptions": {
            "modifier": {
              "page": "current"
            }
          }
        }
      ],
      select: true,//是否选中一行
      scrollX: true,
      bScrollCollapse: false,
      fixedColumns:   {//锁定列
        leftColumns: 2
      },
      fixedHeader: {
        headerOffset: $('#main-header').outerHeight()//锁定表头
      },
      colReorder: true,//列位置调整
      "bSort": false
    });

    $("#example2").colResizable();//列宽调整
    $("#example1").colResizable();//列宽调整

    //全选
    $("#demo_select_all").on("click",function(){
      example2.rows().select();
    });
    //全不选
    $("#demo_select_none").on("click",function (){
      example2.rows().deselect();
    });
    //导出pdf
    $("#demo_export_pdf").on("click",function(){
      $(".btn_export_pdf").trigger("click");
    });
    //导出csv
    $("#demo_export_csv").on("click",function(){
      $(".btn_export_csv").trigger("click");
    });
    //导出 excel
    $("#demo_export_excel").on("click",function(){
      $(".btn_export_excel").trigger("click");
    });
    //打印
    $("#demo_export_print").on("click",function(){
      $(".btn_export_print").trigger("click");
    });
    //选中一列数据
    $('#example2 thead tr').on('click',"th", function () {
      var obj = $(this);
      example2.columns().deselect();
      example2.columns($(this)).select();
    });
    //取消选中一列数据
    $('#example2 thead tr').on('dblclick',"th", function () {
      example2.columns().deselect();
    });


    // example2.buttons().container().appendTo( $('#btn-oper') );
    // $('#example2 tbody tr').attr("data-target","#modal-default");
    //$('#example2 tbody tr').attr({"data-toggle":"modal","data-target":"#modal-default"});

    //双击打开模态详情框
    $('#example2 tbody tr').on('dblclick', 'td:gt(0)', function () {
      var tr = $(this).closest('tr');
      var row = example2.row(tr);
      //然后根据元素取出行号
      //var rowIndex = $('#btnEdit').attr('data-rowindex');
      //最后获取数据
      //$('#example').DataTable().rows(rowIndex).data()[0];
      console.info("row-index:"+row.index());
      show(row.data(),row.index());
    });

    //模态框上一条数据
    $("#show_previous_data").on("click",function(){
      var row_index = $("#dt_row_index").val();
      if(row_index == 0){
        alert("已经是第一条数据了");
        return false;
      }
      var data = $("#example2").DataTable().rows(row_index-1).data()[0];

      var value_arr = ["value1","value2","value3","value4"];
      for(var i = 0;i<value_arr.length;i++){
        $("#"+value_arr[i]).val(data[i]);
      }
      $("#dt_row_index").val(row_index-1);

    });
    //模态框下一条数据
    $("#show_next_data").on("click",function(){
      var row_index = $("#dt_row_index").val();
      //要判断是否为最后一条数据
      var totalSize = example2.data().length;
      if(row_index == (totalSize-1) ){
        alert("已经是最后一条数据了");
        return false;
      }
      var data = $("#example2").DataTable().rows(Number(row_index)+Number(1),{order:'current'}).data()[0];

      var value_arr = ["value1","value2","value3","value4"];
      for(var i = 0;i<value_arr.length;i++){
        $("#"+value_arr[i]).val(data[i]);
      }
      $("#dt_row_index").val(Number(row_index)+Number(1));
    });
    //////////////////树形控件/////////树形控件////////////////
    var defaultData = [
      {
        text: '地区',
        href: '#',
        tags: ['4'],
        nodes: [
          {
            text: '湖北省',
            href: '#',
            tags: ['2'],
            nodes: [
              {
                text: '武汉市',
                href: '#',
                tags: ['0']
              },
              {
                text: '天门市',
                href: '#',
                tags: ['0']
              }
            ]
          },
          {
            text: '广东省',
            href: '#',
            tags: ['0'],
           // state: {checked:true},选中属性
            nodes: [
              {
                text: '广州市',
                href: '#',
                tags: ['0']
              },
              {
                text: '深圳市',
                href: '#',
                tags: ['0']

              },
              {
                text: '惠州市',
                href: '#',
                tags: ['0']
              }
            ]
          },
          {
            text: '北京市',
            href: '#',
            tags: ['0']
          }
        ]
      },
      {
        text: '人口',
        href: '#',
        tags: ['0'],
        nodes:[
          {
            text: '1000万',
            href: '#',
            tags: ['0']
          },
          {
            text: '100万',
            href: '#',
            tags: ['0']
          },
          {
            text: '10万',
            href: '#',
            tags: ['0']
          }
        ]
      }
    ];
    
    //树形控件
    $('#demo_tree_view').treeview({
      data:defaultData,
      color: "#428bca",
      //backColor: "black",背景色
      //borderColor:'green',
      collapseIcon: "glyphicon glyphicon-minus",//可收缩的节点图标
      nodeIcon: "glyphicon glyphicon-user",
      //emptyIcon: "glyphicon glyphicon-ban-circle",//设置列表树中没有子节点的节点的图标
      expandIcon: "glyphicon glyphicon-plus",  //设置列表上中有子节点的图标
      highlightSearchResults:true,//是否高亮搜索结果 默认true
      highlightSelected:true,     //是否选中高亮显示
      onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
      levels: 0 ,                 //设置初始化展开几级菜单 默认为2
      selectedIcon: 'glyphicon glyphicon-tint',
      // selectedBackColor: 'black',  //设置被选中的节点背景颜色
      //selectedColor : 'red',      //设置被选择节点的字体、图标颜色
      showBorder:true,                //是否显示边框
      showCheckbox:true,              //是否显示多选框
      //uncheckedIcon:'',             //设置未选择节点的图标
      showTags:false,//显示徽章
    });
    
    $("#selectCatalog").click(function() {
      $("#tree").show();
      var options = {
        levels: 1,
        data: defaultData,
        showCheckbox:true,
        onNodeSelected: function (event, data) {
          $("#selectCatalog").val(data.text);
          $("#tree").hide();//选中树节点后隐藏树
        }
      };
      $('#tree').treeview(options);
    });
    
    //弹出提示框
    $("#notify").click(function(){
      $.notify({
        // options
        icon: 'glyphicon glyphicon-remove-sign',  //glyphicon glyphicon-info-sign  warning (!)  info(i) ok(√) remove（X）
        title: '错误:',
        message: 'Hello World',
        url: 'https://github.com/mouse0270/bootstrap-notify',
        target: '_blank'
      },{
        // settings
        type: "danger",//弹框类型 info \ danger \ success \ warning
        url_target: '_blank',//地址
        placement: {//显示位置
          from: "bottom",
          align: "right"
        },
        animate: {//动画效果
          enter: 'animated fadeInDown',
          exit: 'animated fadeOutUp'
        }
      });
    });

  });

  function _data_format(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
            '<td>KEY:</td>'
    '</tr>'+
    '</table>';
  }
  //弹出模态框
  function show(data,rowIndex){
    $("#modal-default").show();  //点击模态窗口遮罩层会关闭模态窗口的bug
    $('#modal-default').modal({
      backdrop: 'static',
      show: false
    });
    $("#rowIndex").val(rowIndex);
    var value = ["value1","value2","value3","value4"];
    for(var i = 0;i<value.length;i++){
      $("#"+value[i]).val(data[i]);
    }
    $("#dt_row_index").val(rowIndex);
    $("#test-rowIndex").text("默认弹框 =="+rowIndex+"==");
    $("#modal-default").modal("show");
  }
  //模态框上一条数据
  function previous(rowIndex){

    var data = $("#example2").DataTable().row(rowIndex).data();
    console.info("dta="+data);

    var value_arr = ["value1","value2","value3","value4"];
    for(var i = 0;i<value_arr.length;i++){
      $("#"+value_arr[i]).val(data[i]);
    }

  }
  //模态框上一条数据
  function next(rowIndex) {

    var data = $("#example2").DataTable().row(rowIndex).data();
    console.info("dta="+data);

    var value = ["value1","value2","value3","value4"];
    for(var i = 0;i<value.length;i++){
      $("#"+value[i]).val(data[i]);
    }

  }
  //自动补全
  $(function () {
    $("#autoSearch").typeahead({
      source: function (query, process) {
        return $.ajax({
          url: '/demo/jsonData',
          type: 'post',
          data: {"queryName": query},
          success: function (result) {
            var resultMap = {};
            var names = [];
            $.each(result, function (index, ele) {
              resultMap[ele.name] = ele.id;
              names.push(ele.name);
            });

            return process(result);
          }
        });
      },
      updater: function (result) {
        console.info("id="+result.id);
        return result.name;
      },
    });

  });
    
  //富文本编辑框
  $(function () {
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace('editor1');
    //bootstrap WYSIHTML5 - text editor
    $('.textarea').wysihtml5();
  });


  $(function(){
    var str = "abc";
    if(String.isEmpty(str)){
      alert("空值");
    }else{
      alert(str);
    }
    return false;
    $.ajax({
      url: "/demo/getFunction",
      dataType:"json",
      data:null,
      success: function(data){
        var result = "<script>";
        for (var key in data) {
          result += data[key];
          console.info(data[key]);
        }
        result  += "<\/script>";
        $("body").append(result);
      }
    });
  });

  function testAlert(){
    alert("abc");
  }

  function testClick(){
    $("#testClick").on("click",function(){
        alert("注册点击事件");
    });
  }


  function string_format (str) {
    if (this.isEmpty(str)) {
      return "";
    }

    if (str.indexOf('%s') == -1) {
      return str;
    }

    var arr = str.split('%s');

    if (arr.length > arguments.length) {
      throw 'The number of actual parameters more than number of placeholders!';
    }

    var args = [];
    var str = arr[0];
    for (var arg in arguments) {
      if (arg == 0) {
        continue;
      }
      str += arguments[arg] + arr[arg];
    }

    return str;
  }

</script>
</body>
</html>
